<!--  -->
<template>
  <div>
    <my-echarts :options="option"></my-echarts>
  </div>

</template>
<script setup lang='ts' >
import { computed, PropType } from "vue"
import MyEcharts from "@/base-ui/echarts"
import { EChartsOption } from 'echarts';

const props = defineProps({
  xAxis: {
    type: Array as PropType<string[]>,
    required: true
  },
  yAxis: {
    type: Array as PropType<number[]>,
    required: true
  }
})
let option = computed<EChartsOption>(() => {
  return {
    legend: {
      top: '8%',
      left: 'center'
    },
    xAxis: {
      type: 'category',
      data: props.xAxis
    },
    yAxis: {
      type: 'value'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        data: props.yAxis,
        type: 'bar'
      }
    ]
  };

})



</script>
<style lang='less' scoped>
</style>
